<template>
  <div class="practiceIntroductionFather">
    <PracticeIntroduction :personMessageList="personMessageList">
      <p>我是默认插槽</p>
      <template #days="{interval}">
        <span>间隔：{{ interval }}天</span>
      </template>
    </PracticeIntroduction>
    <br>
    <h2>{{ countStore.count }}</h2>
    <button @click="countStore.increment">+1</button>
  </div>
</template>

<script lang="ts">
export default {
  name: "PracticeIntroduction",
};
</script>
<script lang="ts" setup>
import { type PersonMessageList } from "@/type";
import { reactive } from "vue";
import PracticeIntroduction from "./PracticeIntroduction.vue";
import { useCountStore } from "@/store/count";
const countStore = useCountStore();
console.log(countStore.count, "&&&&&&&&&")
// let personMessage: PersonMessage = {
//   id: "001",
//   name: "飞天",
//   age: 18,
// };
let personMessageList = reactive<PersonMessageList>([
  { id: "0001", name: "遁地", age: 66 },
  { id: "0002", name: "梅西", age: 33 },
  { id: "0003", name: "C罗", age: 37 },
]);
</script>

<style scoped>
.practiceIntroductionFather {
  background-color: rgb(12, 234, 142);
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}
</style>
